<template>
    <div class="home">
        <div class="sales">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="item">
                        <img src="@/assets/images/home_order.png">
                        <div class="tit">
                            <span class="txt">今日订单总数</span>
                            <span class="number">200</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <img src="@/assets/images/home_today_amount.png">
                        <div class="tit">
                            <span class="txt">今日销售总额</span>
                            <span class="number">￥50000.00</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <img src="@/assets/images/home_yesterday_amount.png">
                        <div class="tit">
                            <span class="txt">昨日销售总额</span>
                            <span class="number">￥50000.00</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="todo">
            <el-row>
                <el-col :span="24">
                    <h1>待处理事务</h1>
                    <el-row :gutter="25" class="list">
                        <el-col :span="8">
                            <div class="item">
                                <span class="txt">待付款订单</span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">待发货订单</span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">已发货订单</span>
                                <span class="number">(10)</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="item">
                                <span class="txt">已完成订单</span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">新缺货登记</span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">待处理退货订单</span>
                                <span class="number">(10)</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="item">
                                <span class="txt">待确认收货订单 </span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">待处理退款申请</span>
                                <span class="number">(10)</span>
                            </div>
                            <div class="item">
                                <span class="txt">广告位即将到期</span>
                                <span class="number">(10)</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <div class="plateInfo">
            <el-row :gutter="25">
                <el-col :span="12">
                    <div class="productsView">
                        <h1>商品总览</h1>
                        <el-row :gutter="40" class="contain">
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="productsView">
                        <h1>商品总览</h1>
                        <el-row :gutter="40" class="contain">
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="item">
                                    <span class="number">
                                        100
                                    </span>
                                    <span class="txt">
                                        已下架
                                    </span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="statistics">
            <h1>订单统计</h1>
            <div class="contain">
                <div class="data">
                    <div class="detail">
                        <span class="txt">本月订单总数</span>
                        <span class="value">10000</span>
                        <span class="increase">
                            <em>+10%</em>
                            同比上月
                        </span>
                    </div>
                    <div class="detail">
                        <span class="txt">本周订单总数</span>
                        <span class="value">1000</span>
                        <span class="increase">
                            <em>+10%</em>
                            同比上月
                        </span>
                    </div>
                    <div class="detail">
                        <span class="txt">本月销售总额</span>
                        <span class="value">100000</span>
                        <span class="increase">
                            <em>+10%</em>
                            同比上月
                        </span>
                    </div>
                    <div class="detail">
                        <span class="txt">本周销售总额</span>
                        <span class="value">50000</span>
                        <span class="increase">
                            <em>+10%</em>
                            同比上月
                        </span>
                    </div>
                </div>
                <div class="charts">
                    <div class="datePicker">
                        <div class="picker">
                            <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" :size="size"
                                :clearable="false" />
                        </div>
                    </div>
                    <div class="lineCharts" ref="lineCharts">

                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import * as echarts from 'echarts';
import { dayjs } from 'element-plus';
const size = ref<'default' | 'large' | 'small'>('small')
//获取 ref="lineCharts" 
const lineCharts = ref()
const DATA_FROM_BACKEND={
    columns: ['date', 'orderCount', 'orderAmount'],
    rows: [
        { date: '2018-11-01', orderCount: 10, orderAmount: 1093 },
        { date: '2018-11-02', orderCount: 20, orderAmount: 2230 },
        { date: '2018-11-03', orderCount: 33, orderAmount: 3623 },
        { date: '2018-11-04', orderCount: 50, orderAmount: 6423 },
        { date: '2018-11-05', orderCount: 80, orderAmount: 8492 },
        { date: '2018-11-06', orderCount: 60, orderAmount: 6293 },
        { date: '2018-11-07', orderCount: 20, orderAmount: 2293 },
        { date: '2018-11-08', orderCount: 60, orderAmount: 6293 },
        { date: '2018-11-09', orderCount: 50, orderAmount: 5293 },
        { date: '2018-11-10', orderCount: 30, orderAmount: 3293 },
        { date: '2018-11-11', orderCount: 20, orderAmount: 2293 },
        { date: '2018-11-12', orderCount: 80, orderAmount: 8293 },
        { date: '2018-11-13', orderCount: 100, orderAmount: 10293 },
        { date: '2018-11-14', orderCount: 10, orderAmount: 1293 },
        { date: '2018-11-15', orderCount: 40, orderAmount: 4293 }
    ]
}
const activeBackEnd = reactive({...DATA_FROM_BACKEND});
const value2 = ref(['', ''])
// 创建计算属性以从数据中提取日期数组
const dates = computed(() => activeBackEnd.rows.map(item => item.date));

// 创建计算属性以从数据中提取订单数量数组
const orderCounts = computed(() => activeBackEnd.rows.map(item => item.orderCount));

// 创建计算属性以从数据中提取订单金额数组
const orderAmounts = computed(() => activeBackEnd.rows.map(item => item.orderAmount));

// 监听value2变化
watch(value2, () => {
    const start = dayjs(value2.value[0]).format('YYYY-MM-DD')
    const end = dayjs(value2.value[1]).format('YYYY-MM-DD')
    // console.log(start, end);
    // 筛选出 start,end 在 DATA_FROM_BACKEND.rows 范围内的数据
    activeBackEnd.rows = DATA_FROM_BACKEND.rows.filter(item => {
        const date = dayjs(item.date).format('YYYY-MM-DD')
        // console.log(date, start, end);
        // console.log(date >= start && date <= end);
        return date >= start && date <= end
    })

   


    setTimeout(() => {
        updateLine();
    }, 1000)
})
// 自定义日期快捷选项
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date('2018-11-01')
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
            return [start, end]
            value2.value = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
        },
    },
    {
        text: '最近一月',
        value: () => {
            const end = new Date()
            const start = new Date('2018-11-01')
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
            return [start, end]
            value2.value = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
        },
    }
]
// 初始化默认日期
const initOrderCountDate = () => {
    let start = new Date('2018-11-2');
    const end = new Date();
    end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
    value2.value = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
}
initOrderCountDate();
const myChart = ref<any>(null);
// 更新折线图
const updateLine = () => {
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                type: 'category',
                data: dates.value,
                boundaryGap: false,

            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 200,
                interval: 50,

            },
            {
                type: 'value',
                min: 0,
                max: 20000,
                interval: 5000,
            }
        ],
        series: [
            {
                name: '订单数量',
                type: 'line',
                yAxisIndex: 0,
                smooth: true,
                data: orderCounts.value,
                areaStyle: {
                    color: '#5ee1c7'
                }
            },
            {
                name: '订单金额',
                type: 'line',
                yAxisIndex: 1,
                smooth: true,
                data: orderAmounts.value,
                areaStyle: {
                    color: "#5bc0e3"
                }
            }
        ]
    };
    myChart.value.setOption(option);
}
onMounted(() => {

    myChart.value = echarts.init(lineCharts.value);
    // 绘制图表
    updateLine()

})





</script>
<style lang="scss" scoped>
.home {
    padding: 0 40px;

    .sales {

        .item {
            padding: 10px;
            border: 1px solid #e8e8e8;
            display: flex;
            align-items: center;

            img {
                width: 50px;
            }

            .tit {
                font-size: 12px;
                margin-left: 10px;

                .txt {
                    color: #888;
                }

                .number {
                    display: block;
                    margin-top: 10px;
                }
            }
        }
    }

    h1 {
        font-size: 13px;
        color: #606266;
        background-color: #f2f6fc;
        padding: 10px 14px;
    }

    .todo {
        border: 1px solid #e8e8e8;
        margin-top: 20px;


        .list {
            padding: 10px 10px 20px;

            .item {
                padding: 10px 0;
                border-bottom: 1px solid #e8e8e8;
                display: flex;
                justify-content: space-between;
                color: #606266;

                .number {
                    color: #f66c6c;
                }
            }
        }

    }

    .plateInfo {
        margin-top: 20px;

        .productsView {
            border: 1px solid #e8e8e8;
        }

        .contain {
            padding: 40px;

            .item {
                span {
                    display: block;
                    text-align: center;
                }

                .number {
                    color: #f66c6c;
                    font-size: 18px;
                }

                .txt {
                    font-size: 12px;
                    color: #606266;
                    margin-top: 6px;
                }
            }
        }
    }

    .statistics {
        margin-top: 20px;
        border: 1px solid #e8e8e8;

        .contain {
            display: flex;


            .data {
                padding: 14px 30px 14px 14px;
                border-right: 1px solid #e8e8e8;

                .detail {
                    margin-bottom: 20px;

                    span {
                        display: block;
                        font-size: 12px;
                        white-space: nowrap;
                    }

                    .txt {
                        color: #909399;
                    }

                    .value {
                        font-size: 18px;
                        margin: 5px 0;
                        color: #606266;
                    }

                    .increase {
                        color: #c0c4cc;

                        em {
                            font-style: normal;
                            color: #83c73f;
                        }
                    }

                    &:nth-child(even) {
                        em {
                            color: #f66c6c;
                        }
                    }

                    &:last-child {
                        margin: 0;
                    }
                }
            }
        }

        .charts {
            flex: 1;

            .datePicker {
                display: flex;
                justify-content: flex-end;
                padding: 10px 0;
            }

            .lineCharts {
                height: 100%;
            }
        }
    }
}
</style>